<template>
  <view>
    <u-navbar title="我的资料" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333"></u-navbar>
    <view class="" style="margin-top: 20rpx; background: #fff">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 28rpx; border-bottom: 1rpx solid #f8f8f8; font-size: 30rpx">
        <view class="">头像</view>
        <view class="" style="display: flex; align-items: center" @tap="xgtx">
          <image :src="userinfo.avatar" mode="aspectFill" style="width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 10rpx"></image>
          <u-icon name="arrow-right" color="#444444" size="28"></u-icon>
        </view>
      </view>
      <view
        class=""
        style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 28rpx; border-bottom: 1rpx solid #f8f8f8; font-size: 30rpx"
        @tap="show = true"
      >
        <view class="">姓名</view>
        <view class="">
          <u-icon name="arrow-right" color="#444444" size="28" :label="userinfo.nickname" label-pos="left"></u-icon>
        </view>
      </view>

      <!-- <view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 30rpx 28rpx;border-bottom: 1rpx solid #F8F8F8;font-size: 30rpx;">
					 <view class="">
					 	手机号
					 </view>
					 <view class="" >
						  
					 	 <u-icon name="arrow-right" color="#444444" size="28" :label="userinfo.mobile" label-pos	="left"></u-icon>
					 </view>
				</view> -->
      <view
        class=""
        style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 28rpx; border-bottom: 1rpx solid #f8f8f8; font-size: 30rpx"
        @tap="show1 = true"
      >
        <view class="">性别</view>
        <view class="">
          <u-icon name="arrow-right" color="#444444" size="28" :label="userinfo.gender == 0 ? '女' : '男'" label-pos="left"></u-icon>
        </view>
      </view>

      <view
        class=""
        style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 28rpx; border-bottom: 1rpx solid #f8f8f8; font-size: 30rpx"
        @tap="show2 = true"
      >
        <view class="">生日</view>
        <view class="">
          <u-icon name="arrow-right" color="#444444" size="28" :label="userinfo.birthday ? userinfo.birthday : ''" label-pos="left"></u-icon>
        </view>
      </view>
      <!-- 	<view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 30rpx 28rpx;border-bottom: 1rpx solid #F8F8F8;font-size: 30rpx;">
					 <view class="">
					 	个性签名
					 </view>
					 <view class="" >
						  
					 	 <u-icon name="arrow-right" color="#444444" size="28" ></u-icon>
					 </view>
				</view> -->
    </view>

    <u-modal v-model="show" title="姓名" :show-cancel-button="true" confirm-color="#E50014" @confirm="confirm2">
      <view class="slot-content">
        <input
          type="text"
          value=""
          placeholder="请输入姓名"
          style="height: 90rpx; background: #f7f7f7; margin: 27rpx 60rpx; border-radius: 15rpx; font-size: 28rpx; text-align: center"
          v-model="name"
        />
      </view>
    </u-modal>

    <u-picker mode="selector" confirm-color="#E50014" v-model="show1" :default-selector="[0]" :range="selectorObj" range-key="sex" @confirm="confirm1"></u-picker>
    <u-picker mode="time" v-model="show2" :params="params" confirm-color="#E50014" @confirm="confirm"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#fff'
      },
      show: false,
      show1: false,
      show2: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      selectorObj: [{ sex: '男' }, { sex: '女' }],
      name: '',
      userinfo: {}
    };
  },
  //方法
  methods: {
    xgtx() {
      let that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: 'https://wenzhen.jiangkukeji360.com/api/common/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              token: uni.getStorageSync('user_info').token
            },
            success: (uploadFileRes) => {
              that
                .api({
                  url: '/api/shop/profile',
                  method: 'post',
                  data: {
                    avatar: JSON.parse(uploadFileRes.data).data.url
                  }
                })
                .then((data) => {
                  that.user();
                });
            }
          });
        }
      });
    },

    user() {
      this.api({
        url: '/api/shop/home',
        method: 'post'
      }).then((res) => {
        this.userinfo = res.data;
      });
    },
    confirm(e) {
      console.log(e);
      this.api({
        url: '/api/shop/profile',
        method: 'post',
        data: {
          birthday: e.year + '-' + e.month + '-' + e.day
        }
      }).then((res) => {
        this.user();
      });
    },
    confirm1(e) {
      console.log(e);
      let num = e[0];
      this.api({
        url: '/api/shop/profile',
        method: 'post',
        data: {
          gender: num == 0 ? 1 : 0
        }
      }).then((res) => {
        this.user();
      });
    },
    confirm2() {
      if (this.name == '') {
        uni.showToast({
          title: '请输入新昵称',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api/shop/profile',
          method: 'post',
          data: {
            nickname: this.name
          }
        }).then((res) => {
          this.user();
        });
      }
    }
  },
  //首页渲染
  onLoad(options) {
    this.user();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
</style>
